<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, 
  initial-scale=1.0">
      <title>四象限待办事项 - Eisenhower Matrix</title>
      <style>
          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
          }

          body {
              font-family: 'Segoe UI', Tahoma, Geneva, Verdana,
  sans-serif;
              background: linear-gradient(135deg, #667eea 0%,
  #764ba2 100%);
              min-height: 100vh;
              color: #333;
              line-height: 1.6;
          }

          .container {
              max-width: 1200px;
              margin: 0 auto;
              padding: 20px;
          }

          .header {
              text-align: center;
              margin-bottom: 30px;
              color: white;
          }

          .header h1 {
              font-size: 2.5em;
              margin-bottom: 10px;
              text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
          }

          .header p {
              font-size: 1.1em;
              opacity: 0.9;
          }

          .matrix-container {
              display: grid;
              grid-template-columns: 1fr 1fr;
              grid-template-rows: 1fr 1fr;
              gap: 20px;
              height: 600px;
              background: white;
              border-radius: 15px;
              padding: 20px;
              box-shadow: 0 20px 40px rgba(0,0,0,0.1);
          }

          .quadrant {
              border-radius: 10px;
              padding: 20px;
              position: relative;
              overflow: hidden;
              transition: transform 0.3s ease, box-shadow 0.3s ease;
          }

          .quadrant:hover {
              transform: translateY(-5px);
              box-shadow: 0 10px 25px rgba(0,0,0,0.15);
          }

          .quadrant-1 {
              background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
              border: 3px solid #ff5252;
          }

          .quadrant-2 {
              background: linear-gradient(135deg, #4ecdc4, #7bdbd6);
              border: 3px solid #26a69a;
          }

          .quadrant-3 {
              background: linear-gradient(135deg, #ffe66d, #fff3a0);
              border: 3px solid #ffd54f;
          }

          .quadrant-4 {
              background: linear-gradient(135deg, #a8e6cf, #c8f5e0);
              border: 3px solid #81c784;
          }

          .quadrant-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 15px;
              padding-bottom: 10px;
              border-bottom: 2px solid rgba(255,255,255,0.3);
          }

          .quadrant-title {
              font-weight: bold;
              font-size: 1.1em;
              color: white;
              text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
          }

          .quadrant-subtitle {
              font-size: 0.9em;
              color: rgba(255,255,255,0.8);
              margin-top: 2px;
          }

          .add-task-btn {
              background: rgba(255,255,255,0.2);
              border: 2px solid rgba(255,255,255,0.5);
              color: white;
              padding: 8px 15px;
              border-radius: 20px;
              cursor: pointer;
              font-size: 0.9em;
              transition: all 0.3s ease;
          }

          .add-task-btn:hover {
              background: rgba(255,255,255,0.3);
              border-color: white;
          }

          .task-list {
              flex: 1;
              overflow-y: auto;
              padding-right: 5px;
          }

          .task-list::-webkit-scrollbar {
              width: 6px;
          }

          .task-list::-webkit-scrollbar-track {
              background: rgba(255,255,255,0.1);
              border-radius: 3px;
          }

          .task-list::-webkit-scrollbar-thumb {
              background: rgba(255,255,255,0.3);
              border-radius: 3px;
          }

          .task-item {
              background: rgba(255,255,255,0.15);
              backdrop-filter: blur(10px);
              margin-bottom: 10px;
              padding: 12px;
              border-radius: 8px;
              color: white;
              position: relative;
              animation: fadeIn 0.3s ease;
              border: 1px solid rgba(255,255,255,0.2);
          }

          .task-item:hover {
              background: rgba(255,255,255,0.25);
          }

          .task-content {
              display: flex;
              align-items: flex-start;
              gap: 10px;
          }

          .task-checkbox {
              margin-top: 2px;
              cursor: pointer;
          }

          .task-text {
              flex: 1;
              word-wrap: break-word;
          }

          .task-text.completed {
              text-decoration: line-through;
              opacity: 0.6;
          }

          .task-actions {
              display: flex;
              gap: 5px;
              opacity: 0;
              transition: opacity 0.3s ease;
          }

          .task-item:hover .task-actions {
              opacity: 1;
          }

          .task-action-btn {
              background: rgba(255,255,255,0.2);
              border: none;
              color: white;
              padding: 4px 8px;
              border-radius: 4px;
              cursor: pointer;
              font-size: 0.8em;
              transition: background 0.3s ease;
          }

          .task-action-btn:hover {
              background: rgba(255,255,255,0.4);
          }

          .task-input {
              width: 100%;
              padding: 10px;
              border: 2px solid rgba(255,255,255,0.3);
              border-radius: 6px;
              background: rgba(255,255,255,0.15);
              color: white;
              font-size: 0.9em;
              margin-bottom: 10px;
          }

          .task-input::placeholder {
              color: rgba(255,255,255,0.7);
          }

          .task-input:focus {
              outline: none;
              border-color: rgba(255,255,255,0.6);
              background: rgba(255,255,255,0.2);
          }

          .input-actions {
              display: flex;
              gap: 10px;
              justify-content: flex-end;
          }

          .input-btn {
              padding: 8px 15px;
              border: 2px solid rgba(255,255,255,0.5);
              border-radius: 5px;
              background: rgba(255,255,255,0.2);
              color: white;
              cursor: pointer;
              font-size: 0.9em;
              transition: all 0.3s ease;
          }

          .input-btn:hover {
              background: rgba(255,255,255,0.3);
          }

          .input-btn.primary {
              background: rgba(255,255,255,0.3);
              border-color: white;
          }

          .input-btn.primary:hover {
              background: rgba(255,255,255,0.4);
          }

          .stats {
              margin-top: 20px;
              text-align: center;
              color: white;
              font-size: 0.9em;
          }

          .stats-item {
              display: inline-block;
              margin: 0 15px;
              padding: 8px 15px;
              background: rgba(255,255,255,0.1);
              border-radius: 20px;
              backdrop-filter: blur(10px);
          }

          @keyframes fadeIn {
              from { opacity: 0; transform: translateY(-10px); }
              to { opacity: 1; transform: translateY(0); }
          }

          @media (max-width: 768px) {
              .container {
                  padding: 10px;
              }

              .matrix-container {
                  grid-template-columns: 1fr;
                  grid-template-rows: repeat(4, 1fr);
                  height: auto;
                  gap: 15px;
                  padding: 15px;
              }

              .header h1 {
                  font-size: 2em;
              }

              .quadrant {
                  min-height: 200px;
              }
          }
      </style>
  </head>
  <body>
      <div class="container">
          <div class="header">
              <h1>四象限待办事项</h1>
              <p>基于艾森豪威尔矩阵的任务管理工具</p>
          </div>

          <div class="matrix-container">
              <!-- 象限1：重要且紧急 -->
              <div class="quadrant quadrant-1" data-quadrant="1">
                  <div class="quadrant-header">
                      <div>
                          <div 
  class="quadrant-title">重要且紧急</div>
                          <div 
  class="quadrant-subtitle">立即执行</div>
                      </div>
                      <button class="add-task-btn" 
  onclick="showAddTask(1)">+ 添加任务</button>
                  </div>
                  <div class="task-list" id="tasks-1"></div>
              </div>

              <!-- 象限2：重要但不紧急 -->
              <div class="quadrant quadrant-2" data-quadrant="2">
                  <div class="quadrant-header">
                      <div>
                          <div 
  class="quadrant-title">重要但不紧急</div>
                          <div 
  class="quadrant-subtitle">计划执行</div>
                      </div>
                      <button class="add-task-btn" 
  onclick="showAddTask(2)">+ 添加任务</button>
                  </div>
                  <div class="task-list" id="tasks-2"></div>
              </div>

              <!-- 象限3：紧急但不重要 -->
              <div class="quadrant quadrant-3" data-quadrant="3">
                  <div class="quadrant-header">
                      <div>
                          <div 
  class="quadrant-title">紧急但不重要</div>
                          <div 
  class="quadrant-subtitle">委托他人</div>
                      </div>
                      <button class="add-task-btn" 
  onclick="showAddTask(3)">+ 添加任务</button>
                  </div>
                  <div class="task-list" id="tasks-3"></div>
              </div>

              <!-- 象限4：既不重要也不紧急 -->
              <div class="quadrant quadrant-4" data-quadrant="4">
                  <div class="quadrant-header">
                      <div>
                          <div 
  class="quadrant-title">既不重要也不紧急</div>
                          <div 
  class="quadrant-subtitle">稍后考虑</div>
                      </div>
                      <button class="add-task-btn" 
  onclick="showAddTask(4)">+ 添加任务</button>
                  </div>
                  <div class="task-list" id="tasks-4"></div>
              </div>
          </div>

          <div class="stats">
              <div class="stats-item">
                  总任务：<span id="total-tasks">0</span>
              </div>
              <div class="stats-item">
                  已完成：<span id="completed-tasks">0</span>
              </div>
              <div class="stats-item">
                  完成率：<span id="completion-rate">0%</span>
              </div>
          </div>
      </div>

      <script>
          class QuadrantTodo {
              constructor() {
                  this.tasks = this.loadTasks();
                  this.currentEditingQuadrant = null;
                  this.init();
              }

              init() {
                  this.renderAllTasks();
                  this.updateStats();
                  this.bindEvents();
              }

              bindEvents() {
                  // 键盘快捷键
                  document.addEventListener('keydown', (e) => {
                      if (e.key === 'Escape') {
                          this.cancelAddTask();
                      }
                  });

                  // 定期自动保存
                  setInterval(() => {
                      this.saveTasks();
                  }, 30000);
              }

              loadTasks() {
                  const saved =
  localStorage.getItem('quadrant-tasks');
                  return saved ? JSON.parse(saved) : {
                      1: [], 2: [], 3: [], 4: []
                  };
              }

              saveTasks() {
                  localStorage.setItem('quadrant-tasks',
  JSON.stringify(this.tasks));
              }

              generateId() {
                  return Date.now().toString(36) +
  Math.random().toString(36).substr(2);
              }

              addTask(quadrant, text) {
                  if (!text.trim()) return;

                  const task = {
                      id: this.generateId(),
                      text: text.trim(),
                      completed: false,
                      createdAt: new Date().toISOString(),
                      quadrant: quadrant
                  };

                  this.tasks[quadrant].unshift(task);
                  this.saveTasks();
                  this.renderQuadrantTasks(quadrant);
                  this.updateStats();
              }

              toggleTask(quadrant, taskId) {
                  const task = this.tasks[quadrant].find(t => t.id
  === taskId);
                  if (task) {
                      task.completed = !task.completed;
                      task.completedAt = task.completed ? new
  Date().toISOString() : null;
                      this.saveTasks();
                      this.renderQuadrantTasks(quadrant);
                      this.updateStats();
                  }
              }

              editTask(quadrant, taskId) {
                  const task = this.tasks[quadrant].find(t => t.id
  === taskId);
                  if (!task) return;

                  const newText = prompt('编辑任务:', task.text);
                  if (newText && newText.trim() && newText.trim()
  !== task.text) {
                      task.text = newText.trim();
                      task.updatedAt = new Date().toISOString();
                      this.saveTasks();
                      this.renderQuadrantTasks(quadrant);
                  }
              }

              deleteTask(quadrant, taskId) {
                  if (confirm('确定要删除这个任务吗？')) {
                      this.tasks[quadrant] =
  this.tasks[quadrant].filter(t => t.id !== taskId);
                      this.saveTasks();
                      this.renderQuadrantTasks(quadrant);
                      this.updateStats();
                  }
              }

              moveTask(fromQuadrant, taskId, toQuadrant) {
                  const taskIndex =
  this.tasks[fromQuadrant].findIndex(t => t.id === taskId);
                  if (taskIndex === -1) return;

                  const task =
  this.tasks[fromQuadrant].splice(taskIndex, 1)[0];
                  task.quadrant = toQuadrant;
                  task.movedAt = new Date().toISOString();
                  this.tasks[toQuadrant].unshift(task);

                  this.saveTasks();
                  this.renderQuadrantTasks(fromQuadrant);
                  this.renderQuadrantTasks(toQuadrant);
                  this.updateStats();
              }

              renderAllTasks() {
                  [1, 2, 3, 4].forEach(quadrant => {
                      this.renderQuadrantTasks(quadrant);
                  });
              }

              renderQuadrantTasks(quadrant) {
                  const container =
  document.getElementById(`tasks-${quadrant}`);
                  const tasks = this.tasks[quadrant];

                  container.innerHTML = tasks.map(task => `
                      <div class="task-item" 
  data-task-id="${task.id}">
                          <div class="task-content">
                              <input type="checkbox" 
  class="task-checkbox" 
                                     ${task.completed ? 'checked' : 
  ''} 
                                     
  onchange="todoApp.toggleTask(${quadrant}, '${task.id}')">
                              <div class="task-text ${task.completed
   ? 'completed' : ''}">${this.escapeHtml(task.text)}</div>
                              <div class="task-actions">
                                  <button class="task-action-btn" 
  onclick="todoApp.editTask(${quadrant}, '${task.id}')" 
  title="编辑">✏️</button>
                                  <button class="task-action-btn" 
  onclick="todoApp.showMoveOptions(${quadrant}, '${task.id}')" 
  title="移动">🔄</button>
                                  <button class="task-action-btn" 
  onclick="todoApp.deleteTask(${quadrant}, '${task.id}')" 
  title="删除">🗑️</button>
                              </div>
                          </div>
                      </div>
                  `).join('');
              }

              showMoveOptions(fromQuadrant, taskId) {
                  const options = [
                      { value: 1, text: '重要且紧急' },
                      { value: 2, text: '重要但不紧急' },
                      { value: 3, text: '紧急但不重要' },
                      { value: 4, text: '既不重要也不紧急' }
                  ];

                  const availableOptions = options
                      .filter(opt => opt.value !== fromQuadrant)
                      .map(opt => `${opt.value}. ${opt.text}`)
                      .join('\n');

                  const choice = prompt(`选择移动到的象限：\n\n${ava
  ilableOptions}\n\n请输入象限编号(1-4):`);
                  const toQuadrant = parseInt(choice);

                  if (toQuadrant >= 1 && toQuadrant <= 4 &&
  toQuadrant !== fromQuadrant) {
                      this.moveTask(fromQuadrant, taskId,
  toQuadrant);
                  }
              }

              updateStats() {
                  const totalTasks =
  Object.values(this.tasks).flat().length;
                  const completedTasks =
  Object.values(this.tasks).flat().filter(t => t.completed).length;
                  const completionRate = totalTasks > 0 ?
  Math.round((completedTasks / totalTasks) * 100) : 0;

                  document.getElementById('total-tasks').textContent
   = totalTasks;

  document.getElementById('completed-tasks').textContent =
  completedTasks;

  document.getElementById('completion-rate').textContent =
  `${completionRate}%`;
              }

              escapeHtml(text) {
                  const div = document.createElement('div');
                  div.textContent = text;
                  return div.innerHTML;
              }
          }

          // 全局函数
          function showAddTask(quadrant) {
              todoApp.showAddTaskInput(quadrant);
          }

          // 扩展QuadrantTodo类的方法
          QuadrantTodo.prototype.showAddTaskInput =
  function(quadrant) {
              const container =
  document.getElementById(`tasks-${quadrant}`);

              // 如果已经有输入框，先移除
              const existingInput =
  container.querySelector('.task-input-container');
              if (existingInput) {
                  existingInput.remove();
              }

              const inputContainer = document.createElement('div');
              inputContainer.className = 'task-input-container';
              inputContainer.innerHTML = `
                  <input type="text" class="task-input" 
  placeholder="输入新任务..." maxlength="200">
                  <div class="input-actions">
                      <button class="input-btn" 
  onclick="todoApp.cancelAddTask()">取消</button>
                      <button class="input-btn primary" 
  onclick="todoApp.confirmAddTask(${quadrant})">添加</button>
                  </div>
              `;

              container.insertBefore(inputContainer,
  container.firstChild);

              const input =
  inputContainer.querySelector('.task-input');
              input.focus();

              // 回车键添加任务
              input.addEventListener('keydown', (e) => {
                  if (e.key === 'Enter') {
                      this.confirmAddTask(quadrant);
                  } else if (e.key === 'Escape') {
                      this.cancelAddTask();
                  }
              });

              this.currentEditingQuadrant = quadrant;
          };

          QuadrantTodo.prototype.confirmAddTask = function(quadrant)
   {
              const container =
  document.getElementById(`tasks-${quadrant}`);
              const inputContainer =
  container.querySelector('.task-input-container');

              if (inputContainer) {
                  const input =
  inputContainer.querySelector('.task-input');
                  const text = input.value.trim();

                  if (text) {
                      this.addTask(quadrant, text);
                  }

                  inputContainer.remove();
              }

              this.currentEditingQuadrant = null;
          };

          QuadrantTodo.prototype.cancelAddTask = function() {
              if (this.currentEditingQuadrant) {
                  const container =
  document.getElementById(`tasks-${this.currentEditingQuadrant}`);
                  const inputContainer =
  container.querySelector('.task-input-container');
                  if (inputContainer) {
                      inputContainer.remove();
                  }
                  this.currentEditingQuadrant = null;
              }
          };

          // 初始化应用
          const todoApp = new QuadrantTodo();

          // 页面卸载时保存数据
          window.addEventListener('beforeunload', () => {
              todoApp.saveTasks();
          });
      </script>
  </body>
  </html>